<template>
  <div class="oldstuff">
    <section class="widget">
        <router-link to="/oldstuff" tag="div" class="page-header" style="position:relative;cursor:pointer">
          <h3>二手交易</h3>
          <h4 style="position: absolute;right: 100px;top: 4px;">更多></h4>
        </router-link>
        <div class="rows">
          <div
            class="col-sm-6 col-md-4"
            v-for="(oldstuff,id) in tableData"
            :key="id"
          >
            <router-link :to="'/oldstuffcontent/'+oldstuff.oldstuff_id">
              <div class="thumbnail">
                <img
                  data-src="holder.js/100%x200"
                  alt="100%x200"
                  :src="oldstuff.oldstuff_img"
                  data-holder-rendered="true"
                  style="height: 200px; object-fit: cover;width: 100%; display: block;"
                />
                <div class="caption">
                  <h3 style="color:red">￥{{oldstuff.oldstuff_price}}</h3>
                  <div style="height: 44px">{{oldstuff.oldstuff_name}}</div>
                </div>
              </div>
            </router-link>
          </div>
        </div>
    </section>
  </div>
</template>

<script>
export default {
  data () {
    return {
      pagelistquery: {
        lable: '',
        total: 0,
        pagesize: 6,
        page: 1
      },
      tableData: {}
    }
  },
  methods: {
    async getOldStuffList () {
      const result = await this.$axios.post('/web/getoldstufflist', this.qs.stringify(this.pagelistquery))
      if (result.data.state.type === 'SUCCESS') {
        this.tableData = result.data.data
        console.log(result.data)
      }
    }
  },
  created () {
    this.getOldStuffList()
  }
}
</script>
<style scoped>
  .oldstuff {
    min-height: 200px;
  }

  .col-sm-6{
    margin-top: 20px;
  }

  .rows {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  @media (min-width: 768px) {
    .col-sm-6 {
      width: 31.33333%;
    }
  }

  @media (max-width: 768px) {
    .col-sm-6 {
      width: 48%;
    }
  }
</style>
